<head>
	<meta name="generator" content="Hugo 0.119.0">

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

    <meta name="referrer" content="no-referrer-when-downgrade">


    <title>个人博客部署 | 总结语言学习之路，提供免费的语言学习教程</title>
    <meta property="og:title" content="个人博客部署 | 总结语言学习之路，提供免费语言学习教程，希望与大家一起学习进步。">
    <meta property="og:type" content="website">


    <link rel="stylesheet" href='/static/css/normalize.css?v=0.0.1'>
    <link rel="stylesheet" href='/static/css/style.css?v=0.0.1'>

    <link rel="stylesheet" href='/static/css/sidebar.css?v=0.0.1'>
    <link rel="icon" type="image/x-icon" href="static/images/avatar_user_pil.ico">
    <link type="text/css" rel="stylesheet" href=./static/css/comment.css>


    <script>
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?e0a55b64495e292a238b463a78dd56da";
          var s = document.getElementsByTagName("script")[0];
          s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>


<body>
<header id="header" class="clearfix">
    <div class="container">
        <div class="col-group">
            <div class="site-name ">

                    <h1>
                        <a id="logo" href="http://122.51.203.199/">
                            个人的博客部署
                        </a>
                    </h1>

                <p class="description">总结语言学习之路，提供免费的语言学习教程，希望与大家一起学习进步。</p>
            </div>
            <div>
                <nav id="nav-menu" class="clearfix">
                    <a class='current' href="http://122.51.203.199/">首页</a>

                    <a  href="http://122.51.203.199/archives.html" title="归档">归档</a>

                    <a  href="http://122.51.203.199/about.html" title="关于">关于</a>

                </nav>
            </div>
        </div>
    </div>
</header>


<div id="body">
    <div class="container">
        <div class="col-group">

            <div class="col-8" id="main">
                <div class="res-cons">

<!--                        这里写 郭靖-->
                <h1>别催! 还没有开始写hhh</h1>


                    

                    <main onclick="mainCLick(event)" style="text-align: left">
<!--    <div class="form_item">-->
<!--&lt;!&ndash;        <div class="fake_input_box">&ndash;&gt;-->
<!--&lt;!&ndash;            <label class="role_input_box">用户：<input id="commentator" placeholder="请输入您此时希望扮演的角色名称，确定后右上角会展示"/></label>&ndash;&gt;-->
<!--&lt;!&ndash;            <button onclick="login()" class="role_confirm_btn">登录</button>&ndash;&gt;-->
<!--&lt;!&ndash;        </div>&ndash;&gt;-->
<!--    </div>-->
<!--    <hr/>-->
    <span id="role_info_name">游客</span>
    <div class="form_item">
        <label class="label_img">
            <img src="./static/images/user.jpg" alt="头像" width="50px" style="border-radius: 100%; vertical-align: top">
        </label>
        <textarea id="comment_space" onkeyup="readKey(event)" placeholder="请输入您要评论的内容"></textarea>
    </div>
    <div id="button_submit_div">
        <div style="position: relative">
            <span style="color: lightgray; margin-right: 20px">
                还可以输入 <span id="char_count">1000</span> 个字符
            </span>
            <button class="confirm_btn" id="cancel_reply" onclick="cancelReply(event, this)" style="margin-right: 20px; display: none">取消回复</button>
            <button onclick="emojiTrigger(event)" class="emoji_trigger_btn">🙂</button>
            <button class="confirm_btn" id="submit_button" onclick="submitTree(event)">提交</button>
            <div id="emoji_board" class="emoji_board">
            </div>
        </div>
    </div>
    <hr/>
    <div id="comment_view">
    </div>
</main>
<script type="text/javascript">

    getRandomId = function () {
        return 'id'.concat(Math.floor((Math.random() * 10000000000000000)).toString());
    };
    getCurrentTime = function () {
        return new Date().toLocaleString();
    };

    var curArr = null;

    var commentList = [];

    window.onload = function (ev) {
        // the function will be called at first while page loads
        initTreeComment();
        loadEmoji();
    };

    function loadEmoji() {
        const dom = domById('emoji_board');
        // &#128540;
        const fragment = document.createDocumentFragment();
        let num = 128512;
        for (let i = 0; i < 6; ++i) {
            const p = document.createElement('p');
            p.className = 'emoji_row';
            const pf = document.createDocumentFragment();
            for (let j = 0; j < 9; ++j) {
                const span = document.createElement('span');
                span.className = 'emoji_item'
                span.innerHTML = '&#' + num + ';';
                span.onclick = function () {
                    setEmojiToContent(this.innerText);
                }
                pf.append(span);
                ++num;
            }
            p.appendChild(pf);
            fragment.append(p);
        }
        dom.appendChild(fragment);
    }

    function setEmojiToContent(emo) {
        domById('comment_space').value += emo;
    }

    function emojiTrigger(ev) {
        ev.stopPropagation();
        const dom = domById('emoji_board');
        const block = dom.style.display;
        if (block === 'block') {
            dom.style.display = 'none';
        } else {
            dom.style.display = 'block';
        }
    }

    function login() {
        const commentator = domById('commentator').value.trim();
        if (commentator.length > 0) {
            domById('role_info_name').innerText = "游客";
        }
        initTreeComment();
    }

    /**
     * 初始化评论模块
     */
    initTreeComment = function () {
        const commentView = domById('comment_view');
        if (commentList.length === 0) {
            noComment(commentView)
        } else {
            haveComment(commentView, commentList)
        }
    };

    noComment = function (commentView) {
        commentView.style.textAlign = 'center';
        // commentView.innerText = 'No comments'
    };

    /**
     * 点击 “提交” 按钮调用的函数
     * @param ev
     */
    function submitTree (ev) {
        const textareaEle = domById('comment_space');
        ev.stopPropagation();
        const text = textareaEle.value;
        const commentator = domById('role_info_name').innerText;

        if (text.length === 0) {
            alarmIfEmpSpace();
            return;
        }

        let plcHolder = textareaEle.placeholder;

        if(plcHolder.charAt(0) === '回') {
            plcHolder = plcHolder.substring(plcHolder.indexOf(' ') + 1, plcHolder.length)
        } else {
            curArr = commentList;
            plcHolder = "anonymous";
        }

        // if (commentator === plcHolder) {
        //     cancelReply(event, domById('cancel_reply'));
        //     alert("你不能评论或回复自己!");
        //     return;
        // }

        /*
        * hash表用于保存当前评论的点赞角色名称，默认值位 false
        * */
        const admirers = new Map();
        admirers.set(commentator, false);
        const commentTree = {
            id: getRandomId(),
            commentator: commentator,
            author: plcHolder,
            comment: text,
            time: getCurrentTime(),
            thumbUp: 0,
            admirers: admirers,
            reply: []
        };
        curArr.push(commentTree);
        initTreeComment();
        curArr = null;
        cancelReply(event, domById('cancel_reply'));
    }

    alarmIfEmpSpace = function () {
        alert("The comment content or name are empty！")
    };

    /**
     * 取消回复
     * @param ev 事件
     * @param th 回复按钮自身的 DOM 属性
     */
    function cancelReply (ev, th) {
        ev.stopPropagation();
        th.style.display = 'none';
        domById('comment_space').value = "";
        countTextareaLength();
        fillPlaceholderOfCommentSpace("请输入您要评论的内容");
    }

    /**
     * 计算输入框的内容长度
     */
    function countTextareaLength () {
        const space = domById('comment_space');
        document.getElementById('char_count').innerText = (1000 - space.value.length).toString();
    }

    /**
     * 输入框触发按键事件，并执行相关操作，比如记录输入内容的长度
     * @param ev 事件
     */
    function readKey (ev) {
        const space = domById('comment_space'), len = space.value.length;
        document.getElementById('char_count').innerText = (1000 - len).toString();
        handleCancelButton(space, len > 0 ? 'inline-block' : 'none')
    }

    function handleCancelButton (textArea, status) {
        domById('cancel_reply').style.display = status;
    }

    /**
     * 评论加载
     * @param commentView
     * @param arr
     */
    haveComment = function (commentView, arr) {

        commentView.style.textAlign = 'left';

        let htmlText = '';
        arr.forEach(function (value) {
            htmlText +=
                `<ul id="${value.id}" class="comment_ulist" style="">`+
                `  <li class="comment_line_box" id="${value.id.substring(0, 6)}">` +
                `    <div class="cmt_img">` +
                `      <img alt="头像" class="avatar" src="./static/images/user.jpg" width="30px" style="border-radius: 100%">` +
                `    </div>` +
                `    <div class="cmt_info">` +
                `      <a class="commentator">${value.commentator}</a>` +
                `      <span class="time">${value.time}</span>` +
                `   </div>` +
                `   <div class="cmt_reply">` +
                `       <span id="${value.id.substring(0, 9)}">` +
                `           <a class="cmt_reply_btn" id="${value.id.substring(0, 7)}">回复</a>` +
                `       </span>`;

            if(value.reply.length > 0) {
                htmlText += `<a id="${value.id.substring(0, 8)}" class="cmt_reply_checker">查看回复(${value.reply.length})</a>`
            }
            // 初始化当前角色是否给该条留言点赞了
            const commentator = domById('role_info_name').innerText;
            const isAdmirer = value.admirers.get(commentator);
            let color = 'rgba(0,0,0,0.9)';
            if (!isAdmirer) {
                color = 'rgba(0,0,0,0.4)';
            }
            htmlText += "" +
                `   <span>` +
                `       <a style="color:${color}" id="${value.id.substring(0, 10)}" class="thumb_up">${(value.thumbUp > 0 ? value.thumbUp : "")}</a>` +
                `   </span>` +
                `</div>`;
            htmlText += ` <div style="display: block; margin-top: 8px" class="comment">${value.comment}</div>`;
            htmlText += `</li></ul>`;
        });

        commentView.innerHTML = htmlText;

        showButton(arr, 1)
    };

    function thumbUp(value) {
        const dom = domById(value.id.substring(0, 10));
        dom.onclick = function (ev) {
            const cnt = value.thumbUp;
            const commentator = domById('role_info_name').innerText;
            const isAdmired = value.admirers.get(commentator);
            if (!value.admirers.has(commentator)) {
                value.admirers.set(commentator, false);
            }
            if (isAdmired) {
                value.thumbUp -= 1;
                dom.innerText = value.thumbUp === 0 ? '' : (cnt - 1).toString();
                dom.style.color = 'rgba(0,0,0,0.4)';
            } else {
                value.thumbUp += 1;
                dom.innerText = value.thumbUp.toString();
                dom.style.color = 'rgba(0,0,0,0.9)';
            }
            value.admirers.set(commentator, !isAdmired);
            // TODO 发送请求到后端，并更新数据库
            /**
             * @Tip 这里需要注意一点，点赞功能会存在恶意点击的情况，就是用户对当前评论频繁且快速点赞或取消点赞，如果每次点击我们都请求后端更新数据
             * 那么势必会影响服务器的性能，因此我们需要避免这一点，这里不做解释，大家有兴趣可以评论区留言探讨
             */
        }
    }

    showButton = function (arr, sign) {

        arr.forEach(function (value) {

            const parent = domById(value.id);
            const broEle = domById(value.id.substring(0, 6));

            const reply = domById(value.id.substring(0, 7));

            broEle.onmouseover = function (ev) {
                reply.style.display = 'inline-block';
            };

            thumbUp(value);

            reply.onclick = function (ev) {
                ev.stopPropagation();
                curArr = sign === 1 ? value.reply : arr;
                domById('cancel_reply').style.display = 'inline-block';
                const str = "回复 ".concat(value.commentator);
                fillPlaceholderOfCommentSpace(str)
            };

            const replyLen = value.reply.length;
            if (replyLen > 0) {
                handleReply(replyLen, value, broEle, parent);
            }

            broEle.onmouseleave = function (ev) {
                reply.style.display = 'none'
            };
        });
    };

    function handleReply(len, value, broEle, parent) {
        const checkReply = domById(value.id.substring(0, 8));
        checkReply.onclick = (ev) => {
            ev.stopPropagation();
            if(checkReply.innerText.trim().charAt(0) === '查'){
                ifHaveReply(parent, value.reply, broEle);
                checkReply.innerText = "收起回复";
            } else {
                toggleBackReplies(parent);
                checkReply.innerText = "查看回复("+ len +")";
            }
        };
    }

    toggleBackReplies = function (parentTag) {
        const nodes = parentTag.childNodes;
        parentTag.removeChild(nodes[nodes.length - 1]);
    };

    ifHaveReply = function (parentTag, arr, broEle) {
        const li = document.createElement("li");
        li.className = "reply_list";
        li.style.marginLeft = '42px';
        li.style.borderLeft = 'solid 5px lightgray';

        let htmlText = '<ul class="comment_ulist">';

        arr.forEach(function (value) {
            // 初始化当前角色是否给该条留言点赞了
            const commentator = domById('role_info_name').innerText;
            const isAdmirer = value.admirers.get(commentator);
            let color = 'rgba(0,0,0,0.9)';
            if (!isAdmirer) {
                color = 'rgba(0,0,0,0.4)';
            }

            htmlText +=
                `<li class="comment_line_box" id="${value.id.substring(0, 6)}">` +
                `   <div class="cmt_img" style="margin-left: 10px">` +
                `       <img alt="头像" class="avatar" src="./static/images/user.jpg" width="30px" style="border-radius: 100%">` +
                `   </div>` +
                `   <div class="cmt_info">` +
                `       <a class="commentator">${value.commentator}</a>` +
                `       <span>回复</span>` +
                `       <a class="author">${value.author}</a>` +
                `       <span class="time">${value.time}</span>` +
                `   </div>` +
                `   <div class="cmt_reply">` +
                `       <span id="${value.id.substring(0, 9)}">` +
                `           <a class="cmt_reply_btn" id="${value.id.substring(0, 7)}">回复</a>` +
                `       </span>` +
                `       <span>` +
                `           <a style="color:${color}" id="${value.id.substring(0, 10)}" class="thumb_up">${(value.thumbUp > 0 ? value.thumbUp : "")}</a>` +
                `       </span>` +
                `   </div>` +
                `   <div class="comment">${value.comment}</div>` +
                `</li>`;
        });
        htmlText += '</ul>';
        li.innerHTML = htmlText;
        parentTag.insertBefore(li, broEle.nextSibling);
        showButton(arr, 2)
    };

    fillPlaceholderOfCommentSpace = function (str) {
        document.getElementById('comment_space').placeholder = str
    };

    mainCLick = function (ev) {
        ev.stopPropagation();
        domById('emoji_board').style.display = 'none';
    };

    function len(id) {
        return domById(id).value.trim().length;
    }

    function domById(id) {
        return document.getElementById(id);
    }
</script>









<!--<ol class="page-navigator">-->



<!--    <li  class="current">-->
<!--        <a href="http://122.51.203.199/">1</a>-->
<!--    </li>-->

<!--    <li class="next">-->
<!--        <a href="http://122.51.203.199/">下一页</a>-->
<!--    </li>-->

<!--</ol>-->

                </div>
            </div>

            <div id="secondary">
    <section class="widget">

    </section>

<!--    <section class="widget">-->
<!--        <h3 class="widget-title">我的书《Go语言之路》上市啦🎉</h3>-->
<!--        <a href="https://u.jd.com/VqJ74iV" target="_blank">-->
<!--            <img src="/static/images/book.jpg" width="250">-->
<!--        </a>-->
<!--    </section>-->

    <section class="widget">
        <h3 class="widget-title">👇🏻👇🏻👇🏻我亲自录制的视频课程</h3>
        <a href="https://space.bilibili.com/1034734146?spm_id_from=333.337.0.0" target="_blank"><img src="static/images/rabbit.png" width="250"></a>

<!--        <a href="https://study.163.com/course/courseMain.htm?courseId=1212937804&share=2&shareId=480000002229610" target="_blank"><img src="/static/images/micro.png" width="250"></a>-->
    </section>

    <section class="widget">
        <h3 class="widget-title">最近文章</h3>
<ul class="widget-list">

    <li>
        <a href="http://122.51.203.199" title="【置顶】Go语言学习之路/Go语言教程">激光点云学习之路/3d点云教程</a>
    </li>


</ul>
    </section>



    <section class="widget">
        <h3 class="widget-title">分类</h3>
<ul class="widget-list">

<!--    <li>-->
<!--        <a href=''>Development(14)</a>-->
<!--    </li>-->

<!--    <li>-->
<!--        <a href=''>Django(3)</a>-->
<!--    </li>-->

<!--    <li>-->
<!--        <a href=''>Front-end(1)</a>-->
<!--    </li>-->

<!--    <li>-->
<!--        <a href=''>Golang(124)</a>-->
<!--    </li>-->

<!--    <li>-->
<!--        <a href=''>JavaScript(1)</a>-->
<!--    </li>-->

<!--    <li>-->
<!--        <a href=''>Python(13)</a>-->
<!--    </li>-->

</ul>
    </section>

    <section class="widget">
        <h3 class="widget-title">标签</h3>
<div class="tagcloud">

<!--    <a href=''>Development</a>-->

<!--    <a href=''>Django</a>-->

<!--    <a href=''>Golang</a>-->

<!--    <a href=''>Python</a>-->

<!--    <a href=''>about</a>-->

<!--    <a href=''>front-end</a>-->

</div>
    </section>


<section class="widget">
    <h3 class="widget-title">友情链接</h3>
    <ul class="widget-list">

<!--        <li>-->
<!--            <a target="_blank" href="https://geektutu.com" title="致力于分享有趣的技术实践">极客兔兔-有趣的技术实践</a>-->
<!--        </li>-->

<!--        <li>-->
<!--            <a target="_blank" href="https://draveness.me/golang/" title="灯塔">draveness-Go语言设计与实现</a>-->
<!--        </li>-->

<!--        <li>-->
<!--            <a target="_blank" href="https://www.cnblogs.com/liwenzhou/" title="Python全栈之路">Q1mi-Python全栈之路</a>-->
<!--        </li>-->

    </ul>
</section>


<!--    <section class="widget">-->
<!--        <h3 class="widget-title">微信公众号</h3>-->
<!--        <img src="/static/images/qrcode_for_gzh.jpg" width="258" height="258">-->
<!--    </section>-->

    <section class="widget">
        <h3 class="widget-title">其它</h3>
<!--        <ul class="widget-list">-->
<!--            <li><a href="">文章 RSS</a></li>-->
<!--        </ul>-->
    </section>
</div>
        </div>
    </div>
</div>
<footer id="footer">
    <div class="container">
        &copy; 2024 <a href="http://122.51.203.199/">lifelongResearch团队版权</a>.本站博客未经授权禁止转载.

    </div>
</footer>



<a id="rocket" href="#top"></a>
<script type="text/javascript" src='/js/totop.js?v=0.0.1' async="true"></script>





<script type="text/javascript" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js?v=0.0.1" async></script>




  <script src='static/js/bootstrap.min.js?v=0.0.1'></script>

  <script src='static/js/post_category.1.js?v=0.0.1'></script>


</body>
</html>
